<template>
    <div id="spreadSheet">
        <el-card class="box-card" v-show="action">
            <template #header>
                <div class="box_card_title">
                    <div class="left">
                        <el-button type="primary" @click="action = !action; option = true; ChangeID = 0;">新增</el-button>
                        <el-button @click="delDataAll">删除</el-button>
                    </div>
                    <div class="right">
                        <div class="input">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-input placeholder="请输入标题" v-model="keyword"></el-input>
                                </el-col>
                                <el-col :span="12">
                                    <el-date-picker v-model="timeS" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" :style="{ width: '250px' }" />
                                </el-col>
                            </el-row>
                        </div>
                        <div class="button">
                            <el-button type="primary" :icon="Search" @click="getData">查询</el-button>
                            <el-button :icon="RefreshLeft" @click="resetData">重置</el-button>
                        </div>
                    </div>
                </div>
            </template>
            <el-table :data="tableData" stripe style="width: 100%" @selection-change="selectData">
                <!-- 选择框 -->
                <el-table-column type="selection" width="55" />
                <!-- 图片 -->
                <el-table-column label="封面图" width="100">
                    <!-- 插槽图片(默认) -->
                    <template #default="scope">
                        <el-image style="height: 25px" :src="scope.row.pic" :zoom-rate="1.2" :initial-index="4"
                            fit="cover" />
                    </template>
                </el-table-column>
                <!-- 标题、城市 -->
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="city" label="城市" />
                <!-- 展览、创建时间 -->
                <el-table-column label="展览时间">
                    <template #default="scope">
                        {{ filterTime(scope.row.exh_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template #default="scope">
                        {{ filterTime(scope.row.reg_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- 操作按钮 -->
                        <el-row>
                            <el-col :span="8">
                                <el-text class="mx-1" type="primary"
                                    @click="action = !action; option = false; FormData = scope.row; ChangeID = scope.row.id">编辑</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text class="mx-1" type="success"
                                    @click="preview_show = true; preview_con = scope.row.content">预览</el-text>
                            </el-col>
                            <el-col :span="8">
                                <el-text class="mx-1" type="danger"
                                    @click="delDialog = true; delId = scope.row.id">删除</el-text>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next, jumper" :total="totalPage"
                style="margin: 20px 0;float: right; height:30px;" v-model:current-page="pageCurrent"
                v-model:page-size="pageSize" @update:current-page="getData" />
        </el-card>
        <!-- 传递\表单数据\判断添加or修改\是否关闭表单 -->
        <AddForm v-if="!action" :option="option" :ChangeID="ChangeID" @close="(e) => { action = e; getData() }" />
        <div class="shade" v-show="preview_show">
            <div class="phone">
                <div class="box">
                    <div class="Close" @click="preview_show = false">X</div>
                    <div
                        style="height: 10%;display: flex;align-items: center;justify-content: center; position: relative; border-bottom: 1px solid black;">
                        详细<el-icon style="position: absolute; top:50%; left: 10px;transform: translateY(-50%);"
                            color="black">
                            <ArrowLeftBold />
                        </el-icon></div>
                    <div class="preview_con" style="width: 100%;height: 90%;overflow-y: auto;" v-html="preview_con">
                    </div>
                </div>
            </div>
        </div>
        <!-- 这是删除的对话框 -->
        <el-dialog v-model="delDialog" title="提示" width="30%">
            <span>是否删除这条数据</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delDialog = false">取消</el-button>
                    <el-button type="primary" @click="delDialog = false; delData(delId)">
                        删除
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import moment from 'moment'
import {
    Search, RefreshLeft, ArrowLeftBold
} from '@element-plus/icons-vue'
import AddForm from './add.vue'
import service from '@/utils/request'
// 使用action判断是操作数据还是展示数据
const action = ref(true);
// 判断时添加数据还是修改数据
const option = ref(false)  // true>添加 false>修改
// 当前修改的数据的ID
const ChangeID = ref(null)
// 是否显示展览
const preview_show = ref(false)
// 是否展示删除对话框
const delDialog = ref(false)
// 展览中的内容
const preview_con = ref(``)
// 这是渲染的数据
const tableData = ref([])
// 删除ID的列表
const delList = ref([])
// 当前要删除的ID
const delId = ref(0)
// 筛选数据字段
const keyword = ref('')
const pageCurrent = ref(1)
const pageSize = ref(10)
const startTime = ref('')
const endTime = ref('')
const totalPage = ref(0)
// 获取数据
const getData = async () => {
    let success = await service.get(`/api/spread/spreadShow?keyword=${keyword.value}&pageCurrent=${pageCurrent.value}&pageSize=${pageSize.value}&startTime=${startTime.value}&endTime=${endTime.value}`)
    tableData.value = success.data  // 
    totalPage.value = success.totalPage  // 获取所有内容的条数
}
// 重置操作（获取原始的数据）
const resetData = () => {
    keyword.value = '';
    pageCurrent.value = 1;
    startTime.value = "";
    endTime.value = "";
    timeS.value = ''
    getData()
}
// 挂载阶段获取数据,map数据获取到对应的图片列表
onMounted(() => {
    getData()
})
// 选中的日期
const timeS = ref('');

watch(timeS, (newValue, oldValue) => {
    startTime.value = filterTime(newValue[0]).split(' ')[0]
    endTime.value = filterTime(newValue[1]).split(' ')[0]
})

// 过滤方法（格式化时间数据）
const filterTime = (date) => {
    return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
// 定义选中数据时的操作
const selectData = (e) => {
    delList.value = e
    console.log(e, '选中的数据');
}
// 删除方法
let delData = async (id) => {
    await service.get(`/api/spread/spreadDel/${id}`)
    getData()
}
// 删除所有选中的数据
const delDataAll = async () => {
    await service.post('/api/spread/spreadDelAll', { list: delList.value.map(item => item.id) })
    getData()
}
</script>

<style lang="scss" scoped>
#spreadSheet {
    padding: 20px;

    .shade {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #898787, $alpha: .5);
        z-index: 10;

        .phone {
            position: absolute;
            width: 320px;
            height: 600px;
            // width: 20%;
            // height: 75%;
            left: 45%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 15px solid #000;
            border-radius: 50px;
            z-index: 20;

            .Close {
                font-size: 30px;
                position: absolute;
                left: 100%;
                top: 0;
                transform: translate(100%, -50%);
                color: black;
                z-index: 20;
                cursor: pointer;
            }

            .box {
                width: 100%;
                height: 100%;
                border-radius: 40px;
                padding: 10px;
                box-sizing: border-box;
                word-wrap: break-word;
                background-color: white;

                .preview_con {
                    &::-webkit-scrollbar {
                        display: none;
                        /* Chrome Safari */
                    }

                    scrollbar-width: none;
                    /* Firefox */
                    -ms-overflow-style: none;
                    /* IE 10+ */
                }
            }
        }
    }

    // 设置文字点击样式
    .mx-1 {
        cursor: pointer;
    }

    .el-card {
        // height: 100%;

        ::v-deep .el-card__header {
            border-bottom: 0px;
        }

        // card头部的操作样式 
        .box_card_title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .right {
                display: flex;
                justify-content: space-between;
                width: 700px;

                .input {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

    .el-button {
        width: 80px;
    }
}
</style>
<style>
.el-table .el-table__cell {
    z-index: auto !important;
}
</style>